import { useEffect } from "react";
import { Table, Card, Breadcrumb, Space } from "antd";
import { useAdmins } from "../../hook/admins";
// eslint-disable-next-line
export default () => {
  let [{ total, rows }, { getAdmins, setAdmCurPage, setAdmEachPage }] =
    useAdmins();
  //useEffect传一个数组准确的值，getCoupons改变useEffect才会调用
  useEffect(() => {
    getAdmins();
  }, [getAdmins]);
  const columns = [
    {
      title: "id",
      dataIndex: "_id",
    },
    {
      title: "管理员名称",
      dataIndex: "username",
    },
  ];
  return (
    <div className="site-card-border-less-wrapper">
      <Space direction="vertical" style={{ width: "100%" }}>
        <Card>
          <Breadcrumb>
            <Breadcrumb.Item>主页</Breadcrumb.Item>
            <Breadcrumb.Item>管理员</Breadcrumb.Item>
            <Breadcrumb.Item>
              <a href="#/info/admins">管理员列表</a>
            </Breadcrumb.Item>
          </Breadcrumb>
        </Card>
        <Card>
          <Table
            columns={columns}
            dataSource={rows}
            rowKey={(record) => record._id}
            pagination={{
              total,
              onChange: (page, pageSize) => {
                setAdmCurPage(page);
                setAdmEachPage(pageSize);
              },
            }}
          ></Table>
        </Card>
      </Space>
    </div>
  );
};
